<template>
	<view class="content">
		<!-- 列表板块 -->
		<view class="balance_list">
			<!-- 水费 -->
			<view class="balance_item">
				<!-- 充值 -->
				<view class="recharge">
					<image class="recharge_img" :src="imgUrl+'/static/wap/img/shui_s@2x.png'"></image>
					<!-- estimate -->
					<text class="recharge_sf" v-if="balanceData.water_bill_balance>=0">水费（预计可用{{balanceData.water_info.estimate}}天）</text>
					<text class="recharge_sf" v-if="balanceData.water_bill_balance<0">水费（欠费）</text>
					<text class="recharge_cz recharge_cz_special" @click="goPay(2)">快速充值</text>
				</view>
				<view class="balance">
					<text>结算时间：{{balanceData.water_info.settlement_time}}元</text>
				</view>
				<!-- 余额 -->
				<view class="balance">
					<text>可用余额：{{balanceData.water_bill_balance||0}}元</text>
					<text>本月消费：{{balanceData.water_info.total||0}}元</text>
				</view>
			</view> 
			<!-- 电费 -->
			<view class="balance_item2">
				<!-- 充值 -->
				<view class="recharge">
					<image class="recharge_img" :src="imgUrl+'/static/wap/img/dain_d@2x.png'"></image>
					<text class="recharge_sf" v-if="balanceData.electricity_bill_balance>=0">电费（预计可用{{balanceData.electric_info.estimate}}天）</text>
					<text class="recharge_sf" v-if="balanceData.electricity_bill_balance<0">电费（欠费）</text>
					<text class="recharge_cz recharge_cz_special" @click="goPay(1)">快速充值</text>
				</view>
				<!-- 余额 -->
				<view class="balance">
					<text>结算时间：{{balanceData.electric_info.settlement_time}}</text>
				</view>
				<view class="balance">
					<text>可用余额：{{balanceData.electricity_bill_balance||0}}元</text>
					<text>本月消费：{{balanceData.electric_info.total||0.00}}元</text>
					
				</view>
			</view> 
			<!-- 物业费 -->
			<view class="balance_item3">
				<!-- 充值 -->
				<view class="recharge">
					<image class="recharge_img" :src="imgUrl+'/static/wap/img/wu_w@2x.png'"></image>
					<text class="recharge_sf">物业费<span v-if="balanceData.property_info<0">（欠费）</span></text>
					<text class="recharge_cz recharge_cz_special"  style=""  @click="goPay(3)">快速充值</text>
				</view>
				<!-- 余额 -->
				<view class="balance">
					<text>结算时间：{{balanceData.property_info.settlement_time}}</text>
				</view>
				<view class="balance">
					<text>可用余额：{{balanceData.property_info.property_balance||0}}元</text>
					<text style="display: none;">本月消费：0元</text>
				</view>
			</view> 
		</view>
	</view>
</template>

<script>
	import util from '../../static/util.js'
	export default {
		data() {
			return {
				imgUrl:util.globalData.imgPre,
				balanceData:{
					water_info:{},
					electric_info:{}
				}
			};
		},
		onLoad() {
			this.getBalance()
			console.log(this.imgUrl)
		},
		methods:{
			getBalance(){
				var that=this
				this.ajax({
					url:'/api/user/costCenter',
					data:{},
					success:(res)=>{
						that.balanceData=res.data
					}
				  })
			},
			goPay(n){
				uni.navigateTo({
					url:'../payPage/payPage?type='+n
				})
			}
		}
	}
</script>

<style lang="less" scoped> 
	.content{ 
	}
	.balance_list{ 
		padding: 80rpx 14rpx 0 30rpx;
		.balance_item,
		.balance_item2,
		.balance_item3{
			margin: 80rpx 0;
			height: 284rpx;
			background: url(https://nengyuan.chuangxiangdianli.com/static/wap/img/hong@2x.png) no-repeat;
			background-size: 100% 100%; 
			overflow: hidden;
			.recharge{
				margin: 14rpx 64rpx;
				color: #fff;
				font-size: 30rpx; 
				line-height: 60rpx; 
				position: relative;
				.recharge_img{
					margin-right: 24rpx;
					width: 44rpx;
					height: 44rpx;
				}
				.recharge_sf{
					margin-right: 12rpx;
				}
				.recharge_cz{
					padding: 10rpx;
					width: 143rpx;
					height: 52rpx;
					line-height: 52rpx;
					text-align: center;
					color: #F88C5B;
					font-size: 28rpx;
					background-color: #fff;
					border-radius: 10rpx;
				}
				.recharge_cz_special{
					position: absolute!important;
					top: 0;
					right: 20rpx!important;
				}
			}
			.balance{
				display: flex;
				width: 85%;
				justify-content: space-between;
				margin: 0 auto;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 26rpx;
				color: #fff; 
				// transform: translateX(-24rpx);
				
			}
		}
		.balance_item2{
			background: url(https://nengyuan.chuangxiangdianli.com/static/wap/img/lv@2x.png) no-repeat;
			background-size: 100% 100%;
			.recharge_cz{
				color: #62D7BF !important;
			}
		}
		.balance_item3{
			background: url(https://nengyuan.chuangxiangdianli.com/static/wap/img/huang@2x.png) no-repeat;
			background-size: 100% 100%;
			.recharge_cz{
				color: #F9D14B !important;
			}
		}
	}
</style>
